<template>
	<div class="loading-animtion">
		<div v-if="moreShow && moreShow != 'no'" id="loadingSvg">
			<svg width="100%" height="50%" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="rgba(0, 131, 233, 1)">
				<rect y="10" width="15" height="120" rx="6">
					<animate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite" />
					<animate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite" />
				</rect>
				<rect x="30" y="10" width="15" height="120" rx="6">
					<animate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite" />
					<animate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite" />
				</rect>
				<rect x="60" width="15" height="140" rx="6">
					<animate attributeName="height" begin="0s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite" />
					<animate attributeName="y" begin="0s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite" />
				</rect>
				<rect x="90" y="10" width="15" height="120" rx="6">
					<animate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"  repeatCount="indefinite" />
					<animate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite" />
				</rect>
				<rect x="120" y="10" width="15" height="120" rx="6">
					<animate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite" />
					<animate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite" />
				</rect>
			</svg>
			加载中...
		</div>
		<div class="no-more" v-if="moreShow == 'no'">敬请期待</div>
	</div>
</template>
<script>
export default {
	props: ['moreShow'],
	watch: {
		moreShow () {
			// console.log(this.moreShow, '123')
		}
	}
}
</script>

<style lang="less" scoped>
	.loading-animtion{
		margin-bottom: 100px
	}
	#loadingSvg, .no-more {
		width: 100%;
		height: 100px;
		margin: 0 auto 60px;
		text-align: center;
		font-size: 12px;
	}
	.no-more {
		font-size: 20px;
		line-height: 100px;
	}
</style>
